/*
 * @Description: 金华V4.0.0公交页面
 * @Author: yingying.fan
 * @Date: 2019-07-01 12:57:08
 * @Last Modified by: yingying.fan
 * @Last Modified time: 2019-07-01 12:57:08
 */
<template>
  <div id="app">
    <!-- 标题tab -->
    <title-bar :needBack="false">
      <div class="tab-list-wrapper">
        <div
          v-for="(item,index) in tabList"
          :key="`tab_${index}`"
          class="tab-wrapper"
          :class="[selectedIndex===index?'tab-selected':'tab-not-selected']"
          @click="selectTab(index,item)"
        >
          <p>{{item.text}}</p>
          <div></div>
        </div>
      </div>
    </title-bar>
    <!-- 页面主要部分 -->
    <div
      ref="mainPage"
      class="page-main-wrapper"
      :style="`background-color:${pageBgColor}`"
    >
      <div>
        <!-- 黄色提示条 -->
        <div
          class="fontsize28 yellow-hint"
          v-show="yellowHintText"
        >{{yellowHintText}}</div>
        <bus-notice></bus-notice>
        <keep-alive>
          <router-view class="router-page"></router-view>
        </keep-alive>
      </div>
    </div>
    <bottom-button></bottom-button>
  </div>
</template>

<script>
import { TitleBar } from 'vue-xb-ui-depot'
import BusNotice from '../../components/busnotice/BusNotice'
import BottomButton from './components/BottomButton'
export default {
  name: 'App',
  components: {
    'title-bar': TitleBar,
    'bus-notice': BusNotice,
    'bottom-button': BottomButton
  },
  data() {
    return {
      selectedIndex: -1,
      tabList: [
        { text: '附近', page: '/nearby', pageBgColor: '#ffffff' },
        { text: '收藏', page: '/collection', pageBgColor: '#f9f9f9' }
      ],
      srollTopList: [0, 0],
      yellowHintText: '',
      pageBgColor: ''
    }
  },
  mounted() {
    this.$EventBus.$on('nearbyError', errMsg => {
      if (this.selectedIndex === 0) {
        this.yellowHintText = errMsg
      }
    })
    let index = 0
    this.selectTab(index, this.tabList[index])
  },
  methods: {
    selectTab(index, item) {
      if (this.selectedIndex !== index) {
        // try {
        //   this.$set(this.srollTopList, this.selectedIndex, this.$refs.mainPage.scrollTop)
        //   this.$refs.mainPage.scrollTop = this.srollTopList[index]
        // } catch (error) {
        // }
        this.selectedIndex = index
        this.pageBgColor = item.pageBgColor
        this.yellowHintText = ''
        this.$router.replace(item.page)
      }
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
html {
  /* background-color: #f2f5f6; */
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
  overflow: hidden;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}
.page-main-wrapper {
  overflow-x: hidden;
  overflow-y: auto;
}
.page-main-wrapper > div {
  min-height: 100%;
  background-image: url('./assets/nearby_bg.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: bottom;
}
/* 标题tabbar */
.tab-list-wrapper {
  padding: 0 15px;
  font-size: 0;
}
.tab-wrapper {
  display: inline-block;
  width: 90px;
  margin-right: 10px;
  text-align: center;
}
.tab-not-selected {
  color: #999999;
  font-size: 30px; /*px*/
}
.tab-selected {
  color: #333333;
  font-size: 35px; /*px*/
}
.tab-selected > div {
  width: 50px;
  height: 4px;
  background: #333333;
  margin: 0 20px;
  position: relative;
  bottom: 4px;
}
.bus-notice-wrapper {
  background-color: #ffffff;
}
.yellow-hint {
  width: 100%;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #ff9938;
  color: #ffffff;
}
.router-page {
  /* min-height: calc(100% - 500px); */
  padding-bottom: 370px;
}
</style>
